import axios from 'axios';
import React, { useEffect, useState } from 'react';
import './style.css'

interface Item {
  id: number;
  content: string;
}

const Index:React.FC = () => {
const [items, setItems] = useState<Item[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [page, setPage] = useState<number>(1);
  const [hasMore, setHasMore] = useState<boolean>(true);
  const [asdf,setAsdf]=useState([]);

  const fetchItems = async (page: number) => {
    setLoading(true);
    // 模拟 API 请求
    const response = await new Promise<Item[]>((resolve) => {
      setTimeout(() => {
        const newItems = Array.from({ length: 10 }, (_, i) => ({
          id: (page - 1) * 10 + i + 1,
          content: `Item ${(page - 1) * 10 + i + 1}`,
        }));
        resolve(newItems);
      }, 1000);
    });

    if (response.length === 0) {
      setHasMore(false);
    } else {
      setItems((prev) => [...prev, ...response]);
    }
    setLoading(false);
  };

  useEffect(() => {
    fetchItems(page);
  }, [page]);

  const loadMore = () => {
    if (loading || !hasMore) return;
    setPage((prev) => prev + 1);
  };


      let fun=async()=>{
      let res=await axios.post("/api/Waterdata");
      console.log(res);
      if(res.data.code==200){
        setAsdf(res.data.data[0].list)
      }
    }

      useEffect(()=>{
      fun()
      },[])


  return (
    <div className='WaterfallFlow'>
      {/* <div style={{ columnCount: 3, columnGap: '10px' }}>
        {items.map((item) => (
          <div key={item.id} style={{ breakInside: 'avoid', marginBottom: '10px' }}>
            {item.content}
          </div>
        ))}
      </div>
      {loading && <div>Loading...</div>}
      {hasMore && !loading && (
        <button onClick={loadMore}>加载更多</button>
      )} */}
      {
        asdf.map((item,index)=>(
          <img src={item} key={index} alt="" style={{width:'48%',height:'300px'}} />
        ))
      }
    </div>
  )
}

export default Index
